<template>
  <div id="root" z-index="1" v-show="NoteSate">
    <div class="top">
      <svg class="icon" aria-hidden="true" @click="NoteFn()">
        <use xlink:href="#icon-diannaojiaobiao"></use>
      </svg>
    </div>
    <h1>短信登入</h1>
    <el-form
      :model="ruleForm"
      status-icon
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="手机号" prop="phoneNumber">
        <el-input
          v-model="ruleForm.phoneNumber"
          maxlength="11"
          class="ipt"
        ></el-input>
        <span
          id="svg"
          @click="validatePhoneFn(ruleForm.phoneNumber)"
          v-text="spanName"
        >
          <!-- 点击获取验证码 -->
        </span>
        <!-- <span id="svg">点击获取验证码</span> -->
      </el-form-item>
      <el-form-item label="验证码" prop="code">
        <el-input
          v-model="ruleForm.code"
          maxlength="5"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">
          提交
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { postSendTextMessage, postSMSVerification } from "../../../api/login";
// 引入存取组件
import storage from "../../../utils/storage";
var validatePhoneNumber = (rule, value, callback) => {
  var uPattern =
    /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/;
  if (uPattern.test(value)) {
    callback();
  } else {
    callback("请输入正确手机号");
  }
};
export default {
  props: {
    NoteSate: {
      type: Boolean,
      required: true,
    },
  },
  data() {
    return {
      spanName: "点击获取验证码",
      sumSMS: true,
      ruleForm: {
        phoneNumber: "",
        code: "",
      },
      rules: {
        phoneNumber: [
          { required: true, message: "请输入正确手机号", trigger: "blur" },
          { validator: validatePhoneNumber, trigger: "blur" },
        ],
        code: [
          {
            required: true,
            message: "验证码长度为5位",
            trigger: "blur",
          },
          {
            min: 5,
            max: 5,
            message: "验证码长度为5位",
            trigger: "blur",
          },
        ],
      },
    };
  },
  mounted() {
    // this.initDataFn();
  },
  methods: {
    validatePhoneFn(value) {
      var Phone =
        /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/;
      if (Phone.test(value)) {
        if (this.sumSMS) {
          this.TextMessageFn(value);
          let sum = 30;
          this.spanName = `${sum}秒后可重新发送`;
          let timer = setInterval(() => {
            sum--;
            if (sum < 1) {
              this.spanName = `点击重新发送短信`;
              this.sumSMS = true;
              clearInterval(timer);
            } else {
              this.spanName = `${sum}秒后可重新发送`;
            }
          }, 1000);
        }
        this.sumSMS = false;
      } else {
        console.log("请输入正确手机号");
      }
    },
    setFn({ userInfo, token, permission }) {
      storage.set("userInfo", userInfo);
      storage.set("token", token);
      storage.set("permission", permission);
    },
    NoteFn() {
      this.$emit("NoteEvent");
    },
    async TextMessageFn(phoneNumber) {
      let res = await postSendTextMessage(phoneNumber);
      console.log(res);
    },
    async SMSMessageFn(code) {
      let res = await postSMSVerification(code);
      if (res.data.state) {
        // location.reload();
        this.setFn(res.data);
        this.$router.push("/");
      } else {
        console.log(res.data.msg);
      }
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        console.log(valid);
        if (valid) {
          console.log(1, this.ruleForm.code);
          let arr = this.ruleForm.code;
          this.SMSMessageFn(arr);
        } else {
          console.log(2, valid);
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.icon {
  color: #b2c1e8;
  font-size: 60px;
  position: relative;
  left: 340px;
}
#svg {
  color: #888;
  text-decoration: underline;
  background: #fff;
  display: inline-block;
  height: 45px;
  width: 110px;
  text-align: center;
  cursor: pointer;
  border: 0;
  border-radius: 0 5px 5px 0;
  user-select: none;
}
#root {
  width: 400px;
  height: 450px;
  color: #fff;
  border-radius: 10px;
  background: rgba(0, 47, 161, 0.4);
}
/deep/ .el-form-item__label {
  color: #fff;
}
.top {
  width: 100%;
  height: 100px;
}
h1 {
  text-align: center;
  margin: 20px 0;
}
.el-button {
  width: 250px !important;
}
.el-input {
  width: 250px !important;
}
/deep/.el-input__inner {
  height: 45px !important;
  border: 0;
}
/deep/ .el-form-item__content {
  font-size: 13px;
}
.ipt.el-input {
  position: relative;
  top: 2px;
  width: 140px !important;
  border-radius: 5px 0 0 5px !important;
}
/deep/ .ipt .el-input__inner {
  border-radius: 5px 0 0 5px !important;
}

.el-form-item__label {
  color: #fff !important;
}
</style>
